<template>
  <div class="graphicEditor">
    <div id="toolbar">
      <div>
        提示：
        <div>按住Shift键进行旋转</div>
        <div>按住Alt键进行缩放</div>
      </div>
      <button id="create-rectangle">Create Rectangle</button>
      <button id="undo">Undo</button>
      <button id="redo">Redo</button>
      <button id="export-json">Export JSON</button>
      <!-- <button id="import-json">Import JSON</button> -->
    </div>
    <div id="graphic"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { PixiApp } from './utils/app'
onMounted(() => {
  const element = document.querySelector('#graphic')
  const app = new PixiApp(element, {
    backgroundColor: 0xffffee,
    width: window.innerWidth - 300
  })
  // console.log('app :>> ', app)
})
</script>

<style scoped>
.graphicEditor {
  width: 100%;
  height: 100vh;
  display: flex;
}
#toolbar {
  display: flex;
  flex-direction: column;
  background: lightgreen;
  box-sizing: border-box;
  width: 300px;
}
#graphic {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
canvas {
  position: unset !important;
}
</style>
